<style rel="stylesheet/scss" lang="scss" scoped>
    .screen-box {
        width: 80px;
        height: auto;
        display: flex;
        flex-direction: column;
        background: #fff;
		margin-left: 0px;
        position: relative;
		&:first-child{
			margin-left: 0;
		}
        .screen-box_head {
            width: 100%;
            height: 30px;
            padding-left: 5px;
            box-sizing: border-box;
            border: 1px solid #ebeef5;
            line-height: 30px;
            display: flex;
            >input {
                flex: 1;
                padding-left: 5px;
                display: block;
                width: 70px;
                border-right: 1px solid #ebeef5;
                border: none;
                outline: none;
                font-size: 13px;
            }
        }
        .screen-box_item {
            flex: 1;
            display: flex;
            position: absolute;
            left: 0;
            right: 0;
            top: 30px;
            min-width: 140px;
            z-index: 100;
            background: #fff;
            border: 1px solid #ebeef5;
            border-top: none;
            flex-direction: column;
            ul {
                width: 100%;
                flex: 1;
                height: 200px;
                overflow: auto;
                -webkit-padding-start: 0px !important;
                -webkit-margin-before: 0px;
                -webkit-margin-after: 0px;
                li {
                    width: 100%;
                    height: 30px;
                    justify-content: center;
                    display: flex;
                    align-items: center;
                    line-height: 30px;
                    font-size: 12px;
                    border-bottom: 1px solid #ebeef5;
					>label{
						width:100%;
						display: flex;
						align-items: center;
						padding-left: 10px;
						justify-content: flex-start;
						>span:last-child{
							display: flex;
							flex: 1;
						}
					}
                }
                .load-more {
                    width: 100%;
                    height: 30px;
                    display: inline-block;
                    line-height: 30px;
                    font-size: 14px;
                    color: #666;
                    cursor: pointer;
                    text-align: center;
                }
            }
			.btn{
				width: 100%;
				height: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
        }
		
    }
	
</style>
<template>
    <div class="screen-box">
        <div class="screen-box_head">
            <i class="iconfont icon-iconfontzhizuobiaozhun023125"></i>
            <input type="text" placeholder="搜索" @focus="showDrepBox" class="he-input" v-model="val" />
        </div>
        <div class="screen-box_item" v-if="flag">
            <ul class="item-ul" >
                <li class="item-li" v-for="(item, index) in headTitList">
                    <el-checkbox @change="getValue(item.value)" data-value="item.value" >{{item.value}}</el-checkbox>
                </li>
            </ul>
			<div class="btn">
				
				<el-button type="info" size="mini" >取消</el-button>
				<el-button type="primary" size="mini" @click="filterListFn">确定</el-button>
			</div>
        </div>
    </div>

</template>
<script>
    export default {
		props: {
			flag: {
				default: false
			},
			step: {
				default: 0
			},
			headTitList: {
				type: Array,
				default: []
			}
		},
        data() {
            return {
				val: '',
                showDrep: false
            }
        },
        methods: {
			getValue() {
				this.headTitList.forEach((item) => {
					if(e == item.value){
						item.select = !item.select
					}
				})
				console.log(this.headTitList)
			},
            showDrepBox($event) {
                this.$emit('hideDrep',this.step)
            },
			filterListFn(){
				this.$emit('filterListFn')
			}
        },
		watch:{
			val(val) {
				this.$emit('handleInput',val)
			}
		}
        
    }
</script>
